<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/animate.css" />
		<link rel="stylesheet" href="css/swiper-3.3.1.min.css"/>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body,html{
				height: 100%;
			}
			img{
				display: block;
			}
			.swiper-container{
				height: 100%;  
			}
			.swiper-slide img{
				height: 100%;
				width: 640px;
			}
		</style>
	</head>
	<body>
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide s1"><img src="img/1_02.png"></div>
		        <div class="swiper-slide s2"><img src="img/2.png"></div>
		        <div class="swiper-slide s3"><img src="img/3.png"></div>
		        <div class="swiper-slide s4"><img src="img/4.png"></div>
		        <div class="swiper-slide s5"><img src="img/5.png"></div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div> 
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js" ></script>
	<script type="text/javascript" src="js/swiper-3.3.1.jquery.min.js" ></script>
	<script type="text/javascript" src="js/swiper.animate1.0.2.min.js" ></script>
	<script>        
		  var mySwiper = new Swiper ('.swiper-container', {
		    direction: 'horizontal',
		    loop: true,		    
		    // 如果需要分页器
		    pagination: '.swiper-pagination',		     
		  })        
		  
		  function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
	</script>
</html>
